<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="title">用户信息表</h1>
    <form action="" style="text-align: center;">
        <input type="text" name="username" id="username">
        <input type="text" name="age" id="age">
        <input type="b1" name="submit" id="提交">
        <input type="b2" name="button" id="单击事件">
    </form>

    <br><br><br>

    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>6</td>
            <td>Jones</td>
            <td>22</td>
            <td>女</td>
            <td>HTML,Vue</td>
        </tr>
    </table>
    <script>
        //1.获取dom元素
        let trs = document.querySelectorAll(".data");
        for(let i =0;i<trs.length;i++){
            const tr = trs[i];


            tr.addEventListener('mouseenter',()=>{
                if(i%2==0){
                    tr.style = "background-color:#FBFBD4;"
                }else{
                    tr.style = "background-color:#D9D9FA;"
                }

            })

            //鼠标移出事件
            tr.addEventListener('mouseleave',()=>{
                 tr.style = "background-color:#FFF;"
            })
        }
    </script>
</body>
</html>